<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<base href="<%=request.getContextPath() %>\">
<link rel="stylesheet" type="text/css" href="css/xiangqings.css" />
<link href="js/src/jquery.exzoom.css" rel="stylesheet" type="text/css"/>
		<style type="text/css">
			#exzoom {
				width: 550px;
				height: 400px;
			}
			.my-header{
				margin-bottom: 75px
			}
			.my-header:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}
			
			.my-footer:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}
		</style>
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript">
			$(function(){
				xiahua();
				shu();
				tiankong();
				guige();
				panduan();
				yanse();
				shoppingcart();
				shopping();
				moren();
			})
			
			//填充数据
			function tiankong(){
					var k=""; 	//名称
					var price="";	//价格		
					var scount="";	//库存
					var sid="";		//sid
				<c:forEach var="k" items="${pricelist}" varStatus="vs"> 
					 k="${k.cname}";
					 price="￥"+"${k.sprice}";	
					scount="${k.scount}";
					sid="${k.sid}";
					
				</c:forEach>
				$(".xqname").html(k);		//赋值名字
				$(".price").html(price);	//赋值价格
				$(".ku_cun").html(scount);	//赋值库存
				$(".jiarugouwuche").attr("value",sid);
				$(".lijigoumai").attr("value",sid);
				
			}
			var colorsvalue="";
			var sizesvalue="";
			function panduan(){				 
				var	colors="";
				var	sizes="";
				 $(".canshu>.cs_xx:eq(0)>span").click(function(){ 
					 colors=$(this).text(); 
					 var sz=$(".canshu>.cs_xx:eq(1)>span").length;
					sizes=$(this).parent().siblings().find(".borderyanse").text();
					 console.log(sizes)
					
					 var strs=colors+sizes;		
					 
					 colorsvalue=$(this).attr("value");			//颜色值
					 sizesvalue=$(this).parent().siblings().children('span').siblings('.borderyanse').attr("value"); //尺寸值
					 var shu=$(".button_shu").val();				//数量值
					 <c:forEach var="k" items="${sublist}"> 	
						var str="";
						<c:forEach var="v" items="${k.list}">	
							str=str+"${v.atvname}";
						</c:forEach> 
						
						if(str==strs){				/* 判断选中的规格和已有规格获取sid */
							 var sid="${k.sid}";   
							$.ajax({
								type:"post",
								url:"spxq",
								data:"v=xinxi&sid="+sid,
								success:function(msg){
									if(msg.res){
										 window.location.href="spxq?&sid="+sid+"&colorsvalue="+colorsvalue+"&sizesvalue="+sizesvalue+"&shu="+shu+"&cid=${cid}";	 
										 }
								}
							})
						}				
					</c:forEach> 
				 })
				  $(".canshu>.cs_xx:eq(1)>span").click(function(){ 
					  sizes=$(this).text(); 
					  colors=$(this).parent().siblings().find(".borderyanse").text();
					 var strs=colors+sizes;
					 console.log(strs+"123")
					 colorsvalue=$(this).attr("value");
					 sizesvalue=$(this).parent().siblings().children('span').siblings('.borderyanse').attr("value");
					 var shu=$(".button_shu").val();				//数量值
					 <c:forEach var="k" items="${sublist}"> 	
						var str="";
						<c:forEach var="v" items="${k.list}">	
							str=str+"${v.atvname}";
						</c:forEach> 
						
						if(str==strs){				/* 判断选中的规格和已有规格获取sid */
							 var sid="${k.sid}";
							 $(".jiarugouwuche").attr("value",sid);
							$.ajax({
								type:"post",
								url:"spxq",
								data:"v=xinxi&sid="+sid,
								success:function(msg){
									if(msg.res){
										window.location.href="spxq?&sid="+sid+"&colorsvalue="+colorsvalue+"&sizesvalue="+sizesvalue+"&shu="+shu+"&cid=${cid}";
									}
								}
							})
						}	
					
					</c:forEach> 
				 })

			}
			function moren(){
				<c:forEach var="p" items="${mrlist}"> 
					$(".canshu span").each(function(i,v){
						if("${p.atvname}"==$(this).text()){
							$(this).removeClass("yanse");
							$(this).addClass('borderyanse');
						}
					})
				</c:forEach>
			}
		
			function yanse(){
				
				<c:forEach var="k" items="${values}"> 
				$(".cs_xx>span:eq("+"${k}"+")").removeClass("yanse"); //移除
		        $(".cs_xx>span:eq("+"${k}"+")").addClass('borderyanse');	
				</c:forEach>
		        $(".cs_xx>span").click(function(){
		        	$(this).parent().children(".borderyanse").removeClass("borderyanse"); //移除
		        	$(this).siblings('span').addClass('yanse');
		        	$(this).removeClass("yanse"); //移除
		        	$(this).addClass('borderyanse');
		        })
			}
			
			//a链接点击出现下划线
			function xiahua(){
				$(".tabs>ul>li").click(function(){
					$(this).css({"border-bottom":"solid 1px red"});
				})
			}
			// 数量增加和减少
			
			function shu(){
				$(".button_jia").click(function(){
					var button_shu=$(".button_shu").val();				
					var shuliang=parseInt(button_shu);	
					var kucun=$(".ku_cun").html();
						if(shuliang<kucun){				/* 数量不能大于库存 */
							shuliang++;
						}
															
					$(".button_shu").val(shuliang);				
				})
				$(".button_jian").click(function(){
					var button_shu=$(".button_shu").val();				
					var shuliang=parseInt(button_shu);	
					if(shuliang>1){
						shuliang--;
						$(".button_shu").val(shuliang);					
					}
				})
					
					$(".button_shu").on("input",function(){
							$(this).val($(this).val().replace(/[^\d]/g,""));
							var kucun=$(".ku_cun").html();
							var s=parseInt(kucun);
							console.log(s);
							if($(this).val()>s){
								$(this).val(s);
							}
						   if($(this).val()==""||$(this).val()==0){
								$(this).val("1");
							}				
				})	
			}
			//规格属性
			function guige() {
				var arr = ${jsonArr};
				console.log(arr);
				var colors=[];
				var sizes=[];
				arr.forEach((v,i)=>{
					
					if(v && v.length>0){
					if(v.length==1){
						if(colors.join("").indexOf(v[0].atvname)==-1){
							colors.push(v[0].atvname);
						}
					}else if(v.length==2){
						if(colors.join("").indexOf(v[0].atvname)==-1){
							colors.push(v[0].atvname);
						}
						if(sizes.join("").indexOf(v[1].atvname)==-1){
							sizes.push(v[1].atvname);
						}
					}		
					}
				});
				var n=0;
				
				if(colors.length!=0){
					colors.forEach((v,i)=>{						
						$($(".cs_xx")[0]).append($("<span value="+n+">").addClass("yanse").text(v));						
						console.log(v,n)
						
						n++;
					})
				}
				if(sizes.length!=0){
					sizes.forEach((v,i)=>{						
						$($(".cs_xx")[1]).append($("<span value="+n+">").addClass("yanse").text(v));
						console.log(v,n)
						n++; 
					})
				}
			}
			//加入购物车
			function shoppingcart() {
				$(".jiarugouwuche").click(function(){
					var sid=$(this).attr("value");
					var scount=$(".button_shu").val();
					$.ajax({
						type:"post",
						url:"spxq",
						data:"v=gouwuche&sid="+sid+"&scount="+scount,
						success:function(msg){
							console.log(msg);
							
							if(msg.res){
								window.location.href="gwc?";  
							}else{
								$(".loginss").show();
							}
						}
					})
				})
			}
			//立即购买
			function shopping() {
				$(".lijigoumai").click(function(){
					var liji=$(this);
					$.ajax({
						type:"post",
						url:"shouye",
						data:"v=islogin",
						success:function(msg){
							console.log(msg);
							if(msg=="true"){
								console.log("${uid}");
								var sid=liji.attr("value");
								var sccount=$(".button_shu").val();
								window.location.href="jiesuan?&sid="+sid+"&sccount="+sccount;
							}
							if(msg=="false"){
								$(".loginss").show();
							}
						}
					})
					
				})
			}
		</script>
	</head>
	<body>
		<div class="my-header">
				<jsp:include page="include/header.jsp"></jsp:include>
		</div>
		<!-- 商品详情页总盒子大小 -->
		<div class="hezi">
			
			<!-- 与头部隔绝的盒子大小 -->
			<div class="gejue">
			<!-- 当前选择页面路径 -->
			<div class="lujing">
				电视>4k电视>LED55X8S 55寸无边全面屏 超薄金属机身 LED55X8S
			</div>
			<!-- 左侧图片和右侧信息 -->
			<div class="row">
				<!-- 左侧图片 -->
				<div class="zuo">
					<!-- 左侧上下图片 -->					
					<div class="exzoom" id="exzoom"> 
					      <!--大图区域-->
					      <div class="exzoom_img_box">
					    <ul class="exzoom_img_ul">
					    	
					         <c:forEach items="${photolist}" var="c">
					         	<li><img src="${c.pho_img}"/></li> 
					         </c:forEach>
					        </ul>
					  </div>
					      <!--缩略图导航-->
					      <div class="exzoom_nav"></div>
					      <!--控制按钮-->
					      <p class="exzoom_btn"> <a class="exzoom_prev_btn"><img src="imgs/lingimgs/xqzuo.png"></a> <a href="javascript:void(0);" class="exzoom_next_btn"><img src="imgs/lingimgs/xqyou.png"></a> </p>
					    </div>
					<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
					<script src="js/src/jquery.exzoom.js"></script> 
					<script type="text/javascript">
						    $("#exzoom").exzoom({
						        autoPlay: false,
						    });//方法调用，务必在加载完后执行
						</script>
					
				</div>
				<!-- 右侧信息 -->
				<div class="you">
					<div class="jieshao"><h3 class="xqname"> LED55X8S 55吋无边全面屏 超薄金属机身 </h3></div>
					<div style="font-size: 14px; line-height: 1.42857143;">36核人工智能2.0 前置JBL音箱 智能4K</div>
					<div class="jiage"><h3 class="price">￥2999</h3></div>
					<!-- 参数 -->
					
					<div class="canshu">
					<!-- 规格属性 -->
					<c:forEach var="gg" items="${camlist}"> 			
					 	<div class="cs_xx"> 
							<div class="shux">${gg.attname}</div>
						</div>		
				 	</c:forEach> 
						
					</div>					
					<div class="xiadan">
						<!-- 数量 -->
						<div class="shuliang" style="line-height:25px">
							<span style="margin-right: 20px; font-size: 16px;position: relative; bottom: 2px;margin-right: 64px;">数量</span>
							<button class="button_jian">-</button>
							<input class="button_shu" type='text' value='${empty shu?"1":shu}' min='1'/>
							<button class="button_jia">+</button>
							<span style="margin-right: 20px; font-size: 14px;position: relative; bottom: 2px;margin-right: 64px;color:#CCC">件(库存<font class="ku_cun">2</font>件)</span>
						</div>
						<!-- 下单 -->
						<div class="goumai">
							<div class="lijigoumai"value="">立即购买</div>
							<div class="jiarugouwuche"value="">加入购物车</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 规格详情参数类型 -->
			<div class="canshuleixing">
			<!-- 中部 -->
				<div class="tabs">
					<ul style="width: 265px; border: 0;margin: 0 auto;">
					<li><a href="#xiangqingjieshao">规格参数</a></li>
					<li><a href="#shaidanpingjia">晒单评价</a></li>
					</ul>
				</div>
				<div class="tabscontents">
					<!-- 详情介绍 -->
					
					<div class="xiangqingjieshao" id="xiangqingjieshao">
						${xq}
					</div>
					
					<!-- 晒单评价 -->
					<div class="shaidanpingjia" id="shaidanpingjia">
						<p class="liming">晒单评价</p>
							<div class="currtrue">							
							<div class="cur_tou"><!-- 头像 -->
								<img src="imgs/lingimgs/cur_tou.png">
							</div>
							<div class="cur_nr">
								<div class="cur_jiben">
									<h5 class="yonghunicheng">183****1233</h5>
									<font class="pinglunshijian">2019-05-05 17:59</font>
									<div class="manyi">
										<span class="manyidu">满意度：</span>
										<div class="manyixing">
											<img src="imgs/lingimgs/xqmanyixing.png">
										</div>
									</div>
								</div><!-- cur_jiben-end -->
								<div class="pinlu_nr">
									<p>	
										小时候家里买的第一台电视19寸的就是康佳电视
									</p>	
								</div>
							</div>
						</div>
						
						<div class="currtrue">							
							<div class="cur_tou"><!-- 头像 -->
								<img src="imgs/lingimgs/cur_tou.png">
							</div>
							<div class="cur_nr">
								<div class="cur_jiben">
									<h5 class="yonghunicheng">183****1233</h5>
									<font class="pinglunshijian">2019-05-05 17:59</font>
									<div class="manyi">
										<span class="manyidu">满意度：</span>
										<div class="manyixing">
											<img src="imgs/lingimgs/xqmanyixing.png">
										</div>
									</div>
								</div><!-- cur_jiben-end -->
								<div class="pinlu_nr">
									<p>	
										小时候家里买的第一台电视19寸的就是康佳电视，现在自己长大了看了很多电视的品牌，
										坚定选择康佳电视，不为别的，质量！小时候的康佳电视现在还在用，且中途没有出现任何质量问题，
										品牌大不错放心。信赖。家里的其他电器我准备也买康佳
									</p>	
								</div>
							</div>
						</div>
					</div>
					
				</div>
				</div>
				
			

			</div>
			
		</div>
		<div class="my-footer">
			
				<jsp:include page="include/footer.jsp"></jsp:include>
		</div>
	</body>
</html>
